<template>
  <u-popup
    :show="show"
    @update:show="handleUpdateShow"
    mode="bottom"
    :round="24"
    :safeAreaInsetBottom="true"
    :customStyle="popupStyle"
    @close="handleClose"
    @open="handleOpen"
  >
    <view class="popup-container">
      <!-- 固定的头部区域 -->
      <view class="popup-header-fixed">
        <!-- 顶部装饰条 -->
        <view 
          class="drag-indicator"
          @touchstart.stop="touchStart"
          @touchmove.stop="touchMove"
          @touchend.stop="touchEnd"
        >
          <view class="drag-handle" :class="{ 'dragging': isDragging }"></view>
        </view>
        <!-- 标题栏 -->
        <view class="popup-header">
          <text class="popup-title">{{ title }}</text>
          <view class="close-button" @tap.stop="handleClose">
            <text class="material-icons">close</text>
          </view>
        </view>
      </view>

      <!-- 可滚动的内容区域 -->
      <scroll-view 
        class="popup-scroll-content" 
        scroll-y
      >
        <slot></slot>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
});

const emit = defineEmits(['update:show', 'close']);

// 状态变量
const isDragging = ref(false);
const startY = ref(0);
const translateY = ref(0);

// 重置状态
const resetState = () => {
  isDragging.value = false;
  startY.value = 0;
  translateY.value = 0;
};

// 监听 show 变化
watch(() => props.show, (newVal) => {
  if (!newVal) {
    resetState();
  }
});

// 弹窗样式
const popupStyle = computed(() => ({
  height: '85vh',
  transform: `translateY(${translateY.value}px)`,
  transition: isDragging.value ? 'none' : 'transform 0.3s ease-out'
}));

// 更新显示状态
const handleUpdateShow = (value: boolean) => {
  emit('update:show', value);
  if (!value) {
    resetState();
  }
};

// 关闭弹窗
const handleClose = () => {
  emit('update:show', false);
  emit('close');
  resetState();
};

// 弹窗打开时
const handleOpen = () => {
  resetState();
};

// 触摸事件处理
const touchStart = (event: any) => {
  startY.value = event.touches[0].clientY;
  isDragging.value = true;
};

const touchMove = (event: any) => {
  if (!isDragging.value) return;
  
  const currentY = event.touches[0].clientY;
  const deltaY = currentY - startY.value;
  
  if (deltaY > 0) {
    translateY.value = deltaY;
  }
};

const touchEnd = () => {
  if (!isDragging.value) return;
  
  isDragging.value = false;
  
  if (translateY.value > 150) {
    handleClose();
  } else {
    translateY.value = 0;
  }
};
</script>

<style lang="scss" scoped>
.popup-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 固定头部样式 */
.popup-header-fixed {
  position: relative;
  z-index: 99;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
}

/* 顶部装饰条容器 */
.drag-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30rpx;
  padding: 16rpx 0 8rpx;
  cursor: grab;
}

/* 装饰条样式 */
.drag-handle {
  width: 60rpx;
  height: 6rpx;
  background: #E0E0E0;
  border-radius: 6rpx;
  
  &.dragging {
    background: #999;
  }
}

/* 标题栏样式 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 30rpx 20rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

/* 关闭按钮样式 */
.close-button {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  .material-icons {
    font-size: 40rpx;
    color: #999;
  }
}

/* 可滚动内容区域 */
.popup-scroll-content {
  flex: 1;
  height: 0;
}

@media (prefers-color-scheme: dark) {
  .popup-header-fixed {
    background: #1C1C1E;
  }

  .popup-title {
    color: #fff;
  }

  .drag-handle {
    background: #333;
    
    &.dragging {
      background: #666;
    }
  }

  .close-button .material-icons {
    color: #666;
  }
}
</style> 